<example name="Auth Dialog">
  <file type="html" disable-auto-size>
    <div id="auth-dialog"></div>
  </file>

  <file type="js">
    import {render} from 'react-dom';
    import React from 'react';
    import AuthDialog from '@jetbrains/ring-ui/components/auth-dialog/auth-dialog';
    import Button from '@jetbrains/ring-ui/components/button/button';
    import youtrackLogo from '!file-loader!@jetbrains/logos/youtrack/youtrack.svg';

    class AuthDialogDemo extends React.Component {
      state = {
        confirm: {
          show: true,
          onConfirm: () => {},
          onReject: () => {}
        }
      };

      componentDidMount() {
        this.showAuthDialog();
      }

      hideAuthDialog = () => {
        this.setState({confirm: {show: false}});
      }

      showAuthDialog = () => {
        return new Promise((resolve, reject) => {
          this.setState({
            confirm: {
              show: true,
              errorMessage: 'Authorization lost',
              serviceName: 'YouTrack',
              onLogin: () => this.hideAuthDialog() || resolve(),
              onCancel: () => this.hideAuthDialog() || reject()
            }
          });
        }).
          then(() => console.info('Confirmed')).
          catch(() => console.warn('Rejected'));
      }

      render() {
        return (
        <div>
          <div>
            <Button onClick={this.showAuthDialog}>Show confirm</Button>
          </div>
          <AuthDialog
            {...this.state.confirm}
            serviceImage={youtrackLogo}
            loginLabel="Log in"
            cancelLabel="Stay as guest"
          />
        </div>
        );
      }
     }

    render(<AuthDialogDemo/>, document.getElementById('auth-dialog'));
  </file>
</example>
